<template>
  <el-row :span="24" height="160" style="border:1px solid green ">
    <el-row style="background: #FFFFFF;margin:2px" >
      <el-row style="height:25px;border-bottom: #f0f0f0 solid 1px;">
       <span><i class="el-icon-s-data" style="color:green;margin:0 5px;"/><strong>分析流程信息</strong></span>
        <el-button style="float: right; padding: 1px 0" type="text" >查看历史分析流程</el-button>
      </el-row>
      <!--            <Myconsole ref="myconsole" key=""   />-->
      <div ref="testContainer" style="height:160px;padding:5px; overflow-x: auto">
        <ul class="scroll-info"  v-for="iterm in noticeInfoList">
          <!--根据消息类型，显示不同图表-->
          <li v-if="iterm.message.type=='success'" class="scroll-info-li"> <i class="el-icon-success"  style="color:green "/>
            {{iterm.message.info}}
          </li>
          <li v-else-if="iterm.message.type=='error'" class="scroll-info-li"> <i class="el-icon-error"  style="color:red "/>
            {{iterm.message.info}}</li>
          <li v-else="iterm.message.type=='config'" class="scroll-info-li"> <i class="el-icon-s-tools" style="color:#337ab7 "/>
            {{iterm.message.info}}
          </li>
        </ul>
      </div>
    </el-row>
  </el-row>
</template>

<script>
    import axios from "axios";

    export default {
      name: "NewConsole",
      props:['flowChartId',"nodeId"],
      data() {
        return {
          noticeInfoList: [],
          es: {},
          chatSocket:null,
          websock: null,
        }
      },
      created() {
        // 连接webSocket，用于接收后台实时报警信息推送
        this.initWebSocket();
        this.storeNoticeCheck();

      },
      mounted() {
        this.scrollToBottom()
      },

      updated() {
        // 操作消息模块，消息窗口滚动函数
        this.scrollToBottom()
      },
      beforeDestroy() {
        this.websock.close() //离开路由之后断开websocket连接
      },
      methods: {
        initWebSocket(){ //初始化websocket
          const roomName = this.flowChartId
          const wsUrl = 'ws://127.0.0.1:8000/ws/notice/'+ roomName+'/';
          this.websock = new WebSocket(wsUrl);
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onopen = this.websocketonopen;
          this.websock.onerror = this.websocketonerror;
          this.websock.onclose = this.websocketclose;
        },
        websocketonopen(){ //连接建立之后执行send方法发送数据
          let actions = {"message":{"type":"config", "info": "任务分析流程连接建立成功"}};
          this.websocketsend(JSON.stringify(actions));
        },
        websocketonerror(){//连接建立失败重连
          this.initWebSocket();
        },
        websocketonmessage(e){ //数据接收
          const redata = JSON.parse(e.data);
          console.log("websocket接收到的数据:",redata)
          //解析算法完成情况，判断是否需要解锁面板
          if(redata["message"]["infoType"]==="algorithmn"){
             this.unLockFlowPanel()
          }
          this.noticeInfoList.push(redata)
          // 存储信息
          localStorage.setItem("noticeInfoList"+this.flowChartId,JSON.stringify(this.noticeInfoList))
        },
        websocketsend(Data){//数据发送
          this.websock.send(Data);
        },
        websocketclose(e){  //关闭
          console.log('断开连接',e);
        },
        // 解锁绘图面板
        unLockFlowPanel() {
          this.$emit('task-finish')
        },
        storeNoticeCheck(){
          if(JSON.parse(localStorage.getItem('noticeInfoList'+this.flowChartId)!=null)){
            this.noticeInfoList = JSON.parse(localStorage.getItem('noticeInfoList'+this.flowChartId));
          }else{
          }
        },
        // 新消息返回时，自动滑动滚动条
        scrollToBottom() {
          this.$nextTick(() => {
            this.$refs.testContainer.scrollTop = this.$refs.testContainer.scrollHeight + 10;
          })
        }
      }
    }
</script>

<style scoped>
  .scroll-info>ul{

  }
  .scroll-info-li{
    height:20px;
    font-size: 14px;
    border-bottom: #f0f0f0 1px solid;
  }
  /*.el-card__body {*/
  /*  padding: 5px;*/
  /*}*/
</style>
